<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>入库单</title>
		<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style type="text/css">
		    .outbound_order>p>a{font-size: 14px;margin-left: 15px;color: #62affc;}
			.outbound_order{padding-left:0;padding-right:0;width: 1000px;height: 700px;background: #f8f8f8;margin:20px auto;}
		    .outbound_order>p{display: flex;height: 50px;line-height: 50px;border-bottom: 1px solid #efefef;margin-bottom: 0;}
		    .search{position: relative;}
		    .search input{padding-left:30px;height: 20px;border:1px solid #dddddd;border-radius: 10px;}
		    .search img{display: inline-block;width: 15%;position: absolute;left:0;top:24px}
		    .conent{height: 550px;background: #c7dde0;overflow-y: auto;}
		    .row{margin-left: 0;margin-right: 0;}
		    .col-sm-3{cursor: pointer;}
		    .col-sm-3>p{height: 40px;background: #FFFFFF;line-height: 40px;text-align: center;margin-bottom: 0;}
		    .col-sm-3 ul{height: 160px;background: #f3f3f3;padding-top: 10px;}
		    .col-sm-3 ul li{line-height: 35px;text-indent: 3em;}
		    .col-sm-3 ul li span{display:inline-block;text-indent: 2em;}
		    .state p{display: flex;}
		    .state{height: 70px;border-bottom: 1px solid #efefef;display: flex;justify-content: space-between;line-height: 70px;background:#fff;}
		    .state .img2{width: 42.5%;display: inline-block;}
		    #contable tr{height: 35px;}
		</style>
	</head>
	<body>
		<div class="container outbound_order">
			<p>
				<a href="index.html">返回</a>
				<span style="text-indent: 35em;" id="showSpen">销售单</span>
			</p>
			<div class="state">
				<p>
					<img src="img/qh.png" alt="" id="button" style="cursor: pointer;" onclick="clickImg()"/>
					<img src="img/sx.png" alt="" class="img2"/>
				</p>
				<p class="search">
				   <input type="text" name="" id="" placeholder="流水号/相关号/款号.."/>
				   <img src="img/search.png"/>
				</p>
			</div>
			<div class="conent" id="conent">
				<div class="row">
					<div class="col-sm-3">
						<p>神州11111</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-3" style="margin-top:15px">
						<p>神州数码</p>
						<ul>
							<li>赵经理：<span>13567546303</span></li>
							<li>销售金额：<span>1276.00</span></li>
							<li>待收金额：<span>1276.00</span></li>
							<li>出入库：<span>未出库</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="conent" id="conent2" style="background: #FFFFFF;display: none;">
				<table class="table table-border" id="contable">
					<thead>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>销售单号</td>
							<td>客户名称</td>
							<td>联系电话</td>
							<td>销售时间</td>
							<td>销售数量</td>
							<td>销售数量</td>
							<td>出入库</td>
							<td>收款</td>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<p>总数：<span>37</span>已选中：<span>0</span></p>
		</div>
		<script>
		//点击id为button切换图标
			function clickImg(){
				var imgObj = document.getElementById('button');
				var Flag = (imgObj.getAttribute('src',2)=='img/qh.png');
				imgObj.src = Flag?"img/pingp.png":"img/qh.png";
			};
			//创建table表格：
			$(function(){
				var length = 37;
				var str ='';
				for(var i=0;i<37;i++){
					str +="<tr><td><input type='checkbox' name='' id=''></td><td>XS210</td><td>神州数码</td><td>13567246303</td><td>2017-2-28</td><td>5</td><td>1,267.00</td><td><img src='img/rk.jpg'></td><td><img src='img/sk.jpg'></td></tr>"
				}
				$('#contable tbody').append(str)
			});
			//点击button图标切换div内容：
			$(function(){
		      $('#button').click(function(){
		      	 var status = $('#conent').css('display');
			     if(status == 'block'){
			 	    $('#conent').hide();
			 	    $('#conent2').show();
			    }else{
			 	    $('#conent').show();
			 	    $('#conent2').hide();
			    }
		      })

			})
		</script>
	</body>
</html>
